<template>
  <span :style="style">{{text}}</span>
</template>

<script>
export default {
  name: "termOfValidity",
  props: {
    value: {
      type: String
    }
  },
  computed: {
    text() {
      let res = this.value;
      if(!this.checkValidity()) {
        res += "(过期)";
      }
      return res;
    },
    style() {
      let res = {};
      if(!this.checkValidity()) {
        res["color"] = "red";
      }
      return res;
    }
  },
  methods: {
    checkValidity() {
      let res = true;
      let date = new Date(this.value);
      let d = new Date();
      let cur = this.getTomorrow(d);
      if(this.comparDate(date,cur)) {
        res = false;
      }
      return res;
    },
    getTomorrow(date) {
            var day3 = new Date(date);
            day3.setTime(day3.getTime() + 0 * 60 * 60 * 1000);
            var strMonth = day3.getMonth() + 1;
            var strDay = day3.getDate();
            if (strMonth < 10) {
                strMonth = "0" + strMonth;
            }
            if (strDay < 10) {
                strDay = "0" + strDay;
            }
            var s3 = day3.getFullYear() + "-" + strMonth + "-" + strDay;
            return s3
        },
    comparDate(date1,date2){
      let dd = new Date(date2);
       if(date1 < dd){
         return true;
       }else{
         return false;
       }
    }

  }
}
</script>